<template>
  <div class="ec-input">
    <label for="">{{ label }}</label>
    <input 
      :type="type" 
      :value="value"
      @input="updateValue($event.target.value)"
      :placeholder="placeholder" />
  </div>
</template>

<script>
export default {
  name: 'ec-input',
  props: {
    /**
     * 文本框输入类型
     */
    type: {
      type: String,
      default: 'text'
    },
    /**
     * label
     */
    label: {
      type: String
    },
    /**
     * placeholder
     */
    placeholder: {
      type: String
    },
    /**
     * value
     */
    value: {
      type: String
    }
  },
  data() {
    return {
      test: ''
    };
  },
  methods: {
    updateValue(value) {
      this.$emit('input', value);
    }
  }
};
</script>


<style lang="scss" scope>
  @import '../assets/style/config';
  @import '../assets/style/mixins/common';
  .ec-input{
    border-bottom:1px solid $body-background;
    width:100%;
    background:#fff;
    display: block;
    padding:1rem ;
    @include disBox();
    label{
      height: 2rem;
      line-height: 2rem;
      display: block;
      font-size:1.3rem;
      padding-right:.8rem;
      color:$title-color;
    }
    input{
      @include flex1-1();
      display:block;
      height: 2rem;
      line-height: 2rem;
      font-size:1.3rem;
      border: none;
    }
  }
</style>
